<!--组件测试-->
<template>
  <view class="view_box">
    <onlineService></onlineService>
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <block v-for="(outItem, outIndex) in list" :key="outIndex">
      <view class="express">
        <block v-for="(item, index) in outItem.shipItems" :key="index">
          <view class="good_list" v-if="item.isGift != 1">
            <image class="image_box" :src="item.skuImageUrl"></image>
            <view class="left-content">
              <view class="goods_name text_ellipsis">{{ item.itemName }}</view>
              <view class="flex_space_between color_75">
                <text>{{ item['skuProperties'][0].valueName }}</text>
                <text>x{{ item.qty }}</text>
              </view>
            </view>
          </view>
        </block>

        <view class="express_item">
          <view class="label flex_space_between">
            <text>
              快递单号<text style="margin-left: 18rpx;">{{ outItem.trackingNumber }}</text>
            </text>
            <text class="copybtn_style" @click="copyTrackingNumber(outItem.trackingNumber)">复制</text>
          </view>
          <view class="label">快递公司<text style="margin-left: 18rpx;">{{ outItem.expressName }}</text></view>
          <view class="label" v-if="giftName != ''">赠品<text style="margin-left: 18rpx;">{{ giftName }}</text></view>
        </view>
        <view class="expInfo">
          <block v-if="outItem.trackingRes">
            <scroll-view scroll-y enable-back-to-top style="height: 500px;padding-bottom:60rpx;">
              <block v-for="(item, index) in outItem.trackingRes" :key="index">
                <view class="order">
                  <view class="order_left" :class="index != 0 ? 'color_75' : ''">
                    {{item.showTitle ? item.title : ''}}
                  </view>
                  <view class="order_line_box">
                    <view class="order_line"></view>
                  </view>
                  <view class="logistics_centent">
                    <view class="color_75">{{ item.time }}</view>
                    <view :class="index != 0 ? 'color_75' : ''">{{ item.context }}</view>
                  </view>
                </view>
              </block>
            </scroll-view>
          </block>
          <view class="no_info" v-if="!outItem.trackingRes">暂时还没有物流信息哦</view>
        </view>
      </view>
    </block>
  </view>
</template>
<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
  import tip from '@/utils/tip';
  import api from '@/api/api';
  import NavBar from '../../components/common/navbar';
  import onlineService from '@/components/common/onlineService';
  import {
    SYSTEM_INFO,
    CUSTOMER_INFO,
    MERCHANT_INFO
  } from '@/utils/constant';
  export default {
    config: {
      navigationBarTitleText: '订单物流'
    },
    components: {
      navBar: NavBar
    },
    data() {
      return {
        isShowCustomNavBar: true,
        // 组件所需的参数
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '物流信息查询', //导航栏 中间的标题
          hideSearch: true,
          hideHome: false
        },
        shipmentCode: '',
        list: [],
        orderNo: '',
        giftName: '',
        nowPages: '',
        expressStatus:{
          "1":"已揽收",
          "0":"运输中",
          "5":"派件中",
          '3':"已签收",
          "6":"退回",
          "4":"退签",
          "7":"转投",
          "2":"疑难",
          "8":"清关",
          "14":"拒签"
        }
      };
    },
    components: {
      onlineService: onlineService
    },
    onLoad(options) {
      this.orderNo = options.orderNo;
      this.getShipmentList();
      let pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      this.nowPages = currPage.route;
    },
    onShow() {
      getApp().cl_tracker.track('mini_program_view', { path: this.nowPages, pageName: '物流信息查询'})
    },
    methods: {
      copyTrackingNumber(content) {
        uni.setClipboardData({
          data: content,
          success: function(res) {
            uni.showToast({
              title: '复制成功'
            });
          }
        });
      },
      /**
       * 获取包裹列表
       * @returns {Promise<void>}
       */
      async getShipmentList() {
        let that = this;
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        const json = await api.getShipmentList({
            header: {
              jwt: customerInfo.jwt
            },
            query: {}
          },
          this.orderNo
        );
        if (json.code === 1000 && json.data) {
          let _shiplists = json.data;

          for (let i = 0; i < _shiplists.length; i++) {
            const el = _shiplists[i];
            for (let j = 0; j < el.shipItems.length; j++) {
              const items = el.shipItems[j];
              // 解析字符串为数组
              if (items['skuProperties']) items.skuProperties = JSON.parse(items['skuProperties']);
              // 赠品名称
              if (el.isGift == 1) that.giftName = el.itemName;
            }
            //  查询商品高清大图
            el.shipItems = await that.getOrderItemHDImg(el.shipItems,merchantInfo);
            //  查询物流详情
            el.trackingRes = await this.getOrderExpressInfo(el.expressCode, el.trackingNumber);
          }
          that.list = _shiplists;
          this.shipmentCode = that.list.shipmentCode;
        }
      },
      /**
       * 获取物流信息
       * @param express_code
       * @param express_number
       * @returns {Promise<void>}
       */
      async getOrderExpressInfo(express_code, express_number) {
        const that = this;
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const json = await api.getOrderExpress({
          header: {
          'jwt': customerInfo.jwt
          },
          query: {
            "express_code": express_code,
            "tracking_number": express_number,
						"order_id": that.orderNo
          }
        });
        if (json.code === 1000 && json.data && json.data.tracks && json.data.tracks.length) {
          let _arr = [];
          json.data.tracks.forEach(item=>{
            item.showTitle = false;
            item.title = that.expressStatus[item.status];
            if(!_arr.includes(item.status)){
              item.showTitle = true;
              _arr.push(item.status)
            }
          })
          return json.data.tracks;
        } else {
          return null
        }
      },
      /**
       * 查询订单商品的高清大图
       * @param {Object} lists
       * @param {Object} merchantInfo
       */
      async getOrderItemHDImg(lists,merchantInfo){
        const that = this;
        let _lists = JSON.parse(JSON.stringify(lists));
        if(_lists && _lists.length){
          for (let i = 0; i < _lists.length; i++) {
            const el = _lists[i];
            const _goodsRes = await that.getDetailsById(merchantInfo, el.itemId)
            if(_goodsRes) el.skuImageUrl = _goodsRes;
          }
        }
        return _lists;
      },
      /**
       * 获取商品详情
       * @param {Object} merchantInfo
       * @param {Object} itemId
       */
      async getDetailsById(merchantInfo, itemId){
        return new Promise(async (resolve, reject)=>{
          const _res = await api.goodsDetail({
              query: {
                merchant_id: merchantInfo.cloudMerchantId,
                store_id: merchantInfo.cloudMerchantStoreId
              }
            },
            itemId
          );
          let _img = "";
          if(_res && _res.code == 1000 && _res.data && _res.data.resources && _res.data.resources.length){
            const _obj = _res.data.resources.find((item)=>item.kind == "hdlp");
            if(_obj && _obj.kind == "hdlp" && _obj.type == "image" && _obj.url) _img = _obj.url;
          }
          resolve(_img)
        })
      },
    }
  };
</script>
<style lang="less">
  .view_box{
    font-family: FrankNew-Regular,NotoSansSC-Regular;
    font-size: 24rpx;
  }
  page {
    min-height: 100%;
  }

  .express {
    padding: 0 48rpx;
    margin-top: 24rpx;
    margin-bottom: 12rpx;
    border-bottom: 1px solid #fafafa;
    .express_item {
      width: 100%;
      box-sizing: border-box;
      .label {
        height: 74rpx;
        line-height: 74rpx;
      }

      .expList {
        float: right;
        color: #1b1b1b;
      }
    }
  }

  .good_list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32rpx;
    width: 100%;
    height: 256rpx;
    background: #FAFAFA;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 40rpx;
  }

  .left-content {
    padding-top: 38rpx;
    padding-right: 32rpx;
  }

  .image_box {
    width: 192rpx;
    height: 256rpx;
    flex-shrink: 0;
  }

  .goods_name{
    width: 100%;
    height: 80rpx;
    margin-bottom: 60rpx;
    line-height: 40rpx;
  }

  .text_ellipsis{
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2; /*设置超出两行进行隐藏*/
    font-size: 24rpx;
    font-weight: normal;
  }

  .bagTitle {
    color: #fff;
  }

  .expInfo {
    padding-top: 48rpx;
  }

  .is-hidden {
    display: none;
  }

  .is-show {
    display: block;
  }

  .icon {
    width: 20rpx;
    height: 20rpx;
    background: white;
    border-radius: 50%;
    display: inline-block;
    margin: 0rpx 20rpx 0rpx 40rpx;
  }

  .in {
    border: 1px solid #862633;
  }

  @keyframes my_animation {
    100% {
      transform: scale(2);
      background-color: transparent;
    }
  }

  .no_in {
    border: 1px solid #d0d0d0;
  }

  .on {
    background: #d0d0d0;
    height: 52rpx;
    width: 1px;
    margin-left: 50rpx;
  }

  .transparnet {
    opacity: 0;
  }

  .copybtn_style {
    border-bottom: 1px solid #000;
    padding-bottom: 6px;
    font-family: NotoSansSC-Regular;
    line-height: 1;
    font-size: 24rpx;
    font-weight: 500;
    color: #000;
  }

  .order {
    margin-bottom: 32rpx;
    display:flex;
    align-items:stretch;
    // min-height:140rpx;
  }

  .product_info {
    margin-top: 7rpx;
  }

  .text2 {
    font-size: 24rpx;
    margin-right: 2rpx;
  }

  .flex_space_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .color_75{
    color: #757575;
  }
  .no_info{
    text-align: center;
    font-size: 28rpx;
    font-weight: normal;
    padding-bottom: 48rpx;
  }
  .order_left{
    width: 108rpx;
    flex-shrink: 0;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 48rpx;
  }
  .order_line_box{
    flex-shrink: 0;
    padding: 10rpx 0;
    margin-right: 20rpx;
  }
  .order_line{
    width: 18rpx;
    height: 100%;
    border-right: 1px dashed #C6C6C6;
  }
  .color_75{
    color: #757575 !important;
  }
  .logistics_centent{
    font-size: 24rpx;
    font-weight: normal;
    line-height: 40rpx;
  }
</style>
